<template lang="html">
  <div v-loading="loading" class="main-panel">
    <el-button type="primary" @click="attrGroupDialog('post')">添加</el-button>
    <el-dialog v-loading="loading" title="编辑" :visible.sync="attrGroupDiaIsShow" class="diaForm"
               :append-to-body="false">
      <el-form
        ref="attrGroupRef"
        :model="attrGroupForm"
        :rules="attrGroupRules"
        label-width="140px"
      >
        <el-form-item label="类别" prop="attr_group_category_id">
          <el-col :span="15">
            <el-select
              v-model="attrGroupForm.attr_group_category_id"
              filterable
              remote
              clearable
              reserve-keyword
              placeholder="类别"
              :remote-method="getProductCategoryRemote"
              :loading="loading"
            >
              <el-option
                v-for="item in categoryOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="商品规格名称" prop="attr_group_name">
          <el-col :span="10">
            <el-input
              v-model="attrGroupForm.attr_group_name"
              type="text"
              clearable
              placeholder="请输入商品规格名称"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="editAttrGroup()"
          >确认
          </el-button>
          <el-button @click="attrGroupDiaIsShow = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-table
      :data="attrGroupTableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="name"
        label="商品规格名称"
      />
      <el-table-column
        prop="categoryInfo.name"
        label="类别"
      />
      <el-table-column
        prop="create_time"
        label="创建时间"
      />
      <el-table-column
        prop="update_time"
        label="更新时间"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="attrGroupDialog('put',scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteAttrGroup(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:center;margin-top:20px">
      <el-pagination
        :current-page="attrGroupTableDataPaginateCurrentPage"
        :page-sizes="attrGroupTableDataPaginateTotalPageSizes"
        :page-size="attrGroupTableDataPaginateTotalPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="attrGroupTableDataPaginateTotal"
        @size-change="attrGroupTableDataHandleSizeChange"
        @current-change="attrGroupTableDataHandleCurrentChange"
      >
        <!-- <span>当前{{ attrGroupTableDataPaginateCurrentPage }}页，</span>
                        <span>共{{ attrGroupTableDataPaginateLastPage }}页</span> -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      attrGroupSearchForm: {},
      categorySearchForm: {},
      attrGroupTableData: [],
      categoryTableData: [],
      attrGroupOptions: [],
      categoryOptions: [],
      attrGroupTableDataPaginateCurrentPage: 1,
      attrGroupTableDataPaginateTotal: 1,
      attrGroupTableDataPaginateLastPage: 1,
      attrGroupTableDataPaginateTotalPageSize: 10,
      attrGroupTableDataPaginateTotalPageSizes: [10, 20, 50, 100],
      attrGroupTab: [],
      attrGroupEditType: 'post',
      attrGroupDiaIsShow: false,
      attrGroupForm: {},
      attrGroupRules: {
        attr_group_category_id: [{
          required: true,
          trigger: 'blur'
        }],
        attr_group_name: [{
          required: true,
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    this.getCategoryList(1, 10000)
    this.getAttrGroupList()
  },
  methods: {
    getProductCategoryRemote(query) {
      if (query !== '') {
        this.categoryOptions = this.categoryTableData.filter(item => {
          return item.label.toLowerCase()
            .indexOf(query.toLowerCase()) > -1
        })
      } else {
        this.categoryOptions = this.categoryTableData
      }
    },
    attrGroupTableDataHandleSizeChange(val) {
      // 改变每页显示的条数
      this.attrGroupTableDataPaginateTotalPageSize = val
      this.getAttrGroupList(1, this.attrGroupTableDataPaginateTotalPageSize)
    },
    attrGroupTableDataHandleCurrentChange(val) {
      this.attrGroupTableDataPaginateCurrentPage = val
      this.getAttrGroupList(val, this.attrGroupTableDataPaginateTotalPageSize)
    },
    getCategoryList(page = 1, limit = 10) {
      this.loading = true
      this.categorySearchForm.page = page
      this.categorySearchForm.limit = limit
      this.$store.dispatch('product/getCategoryList', this.categorySearchForm).then((res) => {
        this.categoryTableData = res.data.data
        this.categoryOptions = res.data.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getAttrGroupList(page = 1, limit = 10) {
      this.loading = true
      this.attrGroupSearchForm.page = page
      this.attrGroupSearchForm.limit = limit
      this.$store.dispatch('product/getProductAttrGroupList', this.attrGroupSearchForm).then((res) => {
        this.attrGroupTableData = res.data.data
        this.attrGroupOptions = res.data.data
        this.attrGroupTableDataPaginateTotal = res.data.total
        this.attrGroupTableDataPaginateCurrentPage = res.data.current_page
        this.attrGroupTableDataPaginateLastPage = res.data.last_page
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    deleteAttrGroup(row) {
      // console.log(row)
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.loading = true
          this.$store.dispatch('product/deleteProductAttrGroup', { attr_group_id: row.id }).then((res) => {
            this.getAttrGroupList()
            this.loading = false
            this.attrGroupDiaIsShow = false
            this.$message({
              type: 'success',
              message: res.msg
            })
          }).catch(() => {
            this.loading = false
            return false
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editAttrGroup() {
      switch (this.attrGroupEditType) {
        case 'post':
          this.$refs['attrGroupRef'].validate((valid) => {
            if (valid) {
              this.loading = true
              this.$store.dispatch('product/postProductAttrGroup', this.attrGroupForm).then((res) => {
                this.getAttrGroupList()
                this.attrGroupForm = {}
                this.loading = false
                this.attrGroupDiaIsShow = false
                this.$message({
                  type: 'success',
                  message: res.msg
                })
              }).catch(() => {
                this.loading = false
              })
            } else {
              return false
            }
          })
          break
        case 'put':
          this.$refs['attrGroupRef'].validate((valid) => {
            if (valid) {
              this.loading = true
              this.$store.dispatch('product/putProductAttrGroup', this.attrGroupForm).then((res) => {
                this.getAttrGroupList()
                this.attrGroupForm = {}
                this.loading = false
                this.attrGroupDiaIsShow = false
                this.$message({
                  type: 'success',
                  message: res.msg
                })
              }).catch(() => {
                this.loading = false
              })
            } else {
              return false
            }
          })
          break
      }
    },
    attrGroupDialog(type, row) {
      this.attrGroupDiaIsShow = true
      switch (type) {
        case 'post':
          this.attrGroupEditType = 'post'
          break
        case 'put':
          this.attrGroupEditType = 'put'
          // 这里一定要使用nextTick的方式赋值，不然会卡住input
          this.$nextTick(() => {
            this.$set(this.attrGroupForm, 'attr_group_id', row.id)
            this.$set(this.attrGroupForm, 'attr_group_category_id', row.category_id)
            this.$set(this.attrGroupForm, 'attr_group_name', row.name)
          })
          break
        default:
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main-panel {
  padding: 18px;
  font-size: 10px;
}
</style>
